<template>
    <el-dialog
        :before-close="resetForm"
        :close-on-click-modal="false"
        :visible.sync="visible"
        append-to-body
        title="编辑用户信息"
        width="560px"
    >
        <div class="edit_page_div">
            <el-form ref="form" :model="form" :rules="rules" :show-message="false" label-width="100px">
                <el-form-item label="用户类型" prop="userType">
                    <select-option select-width="400px" v-model="form.userType" :list="userTypeList"></select-option>
                </el-form-item>
                <el-form-item label="用户名称" prop="nickName">
					<el-input style="width: 400px;" v-model="form.nickName"></el-input>
                </el-form-item>
                <el-form-item label="用户账号" prop="accountNumber">
                    <el-input style="width: 400px;" v-model="form.accountNumber" :disabled="form.id"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" prop="password" v-if="!form.id">
                    <el-input style="width: 400px;" type="password" v-model="form.password" autocomplete="new-password"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" prop="enableFlag">
                    <radios-option v-model="form.enableFlag"></radios-option>
                </el-form-item>
                <el-form-item label="角色信息" prop="roleIdList">
                    <checkbox-option v-model="form.roleIdList" :list="roleList"></checkbox-option>
                </el-form-item>
            </el-form>
            <div class="edit_button">
                <el-button v-loading.fullscreen.lock="loading" type="primary" @click="submit">保 存</el-button>
                <el-button type="primary" @click="resetForm">取 消</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import RadiosOption from "@/components/radio/radiosOption";
import SelectOption from "@/components/select/selectOption";
import CheckboxOption from "@/components/checkbox/checkboxOption.vue";

export default {
    name: "userEdit",
    components: {CheckboxOption, RadiosOption, SelectOption},
    props: {
        visible: Boolean,
        id: String,
    },
    data() {
        return {
            loading: false,
            showPerson: false,
            form: {
                userType: 'userType_1',
                nickName: '',
                accountNumber: '',
                password: '',
                enableFlag: 1,
                roleIdList: [],
                source: 2,
            },
            rules: {
                userType: [{required: true, message: '', trigger: 'change'}],
                accountNumber: [{required: true, message: '', trigger: 'change'}],
                password: [{required: true, message: '', trigger: 'change'}],
                nickName: [{required: true, message: '', trigger: 'change'}],
                enableFlag: [{required: true, message: '', trigger: 'change'}],
                roleIdList: [{required: true, message: '', trigger: 'change'}],
            },
            userTypeList: [],
            roleList: [],
        }
    },
    watch: {
        visible(newVal) {
            if (newVal) {
				this.userTypeList = this.$common.getDicList('userType');
                let userData = this.$root.getStorage('userData');
                this.getRoleList();
            }
        }
    },
    methods: {
        getRoleList() {
            this.loading = true;
            this.$axios.post("/CHILD_SYSTEM/systemRole/getAllList").then(res => {
                this.roleList = [];
                res.data.forEach(item => {
                    this.roleList.push({label: item.roleName, value: item.id});
                })
                if (this.id) {
                    this.getData();
                } else {
                    this.loading = false;
                }
            }).catch(() => {
                this.loading = false;
            })
        },
        getData() {
            this.loading = true;
            this.$axios.get("/CHILD_SYSTEM/systemUser/getOneEntity/" + this.id).then(res => {
                this.form = res.data;
            }).finally(() => {
                this.loading = false;
            })
        },
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (!this.id) {
                        if (this.form.password.length < 6 || this.form.password.length > 20) {
                            return this.$message.error('密码长度在 6 到 20 个字符')
                        }
                    }
                    this.loading = true;
                    this.$axios.post("/CHILD_SYSTEM/systemUser/" + (this.id ? "update" : "insert"), this.form).then(res => {
                        this.resetForm();
                        this.$message.success(res.message);
                    }).finally(() => {
                        this.loading = false;
                    })
                } else {
                    this.$message.error('表单填写有误');
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs.form.resetFields();
            this.form = this.$options.data().form;
            this.$emit('update:visible', false);
            this.$emit('refreshList');
        }
    }
}
</script>

<style scoped>

</style>